<template>
	<view class="foot">
		<view v-if="footStore.footlist.length>0">
			<view class="foot-section" v-for="(item,index) in footStore.footlist" :key="index">
				<view class="foot-date">
					<image src="../../static/icon11.png" mode="aspectFit"></image>
					<text>{{item.day}}</text>
				</view>
				<view class="foot-item" v-for="(sitem,sindex) in item.list" :key="sindex">
					<navigator :url="`/pages/proinfo/proinfo?id=${sitem.id}`" hover-class="none" class="foot-pro">
						<view class="foot-pro-l">
							<view class="jximgbox">
								<view class="jxstips">{{sitem.Class}}</view>
								<image class="jximg" :src="sitem.PicFiles" mode="aspectFit"></image>
							</view>
						</view>
						<view class="jxinfo">
							<view class="jxtitle">{{sitem.Titles}}</view>
							<view class="jxprice" v-if="isLogin">￥{{sitem.Price}}</view>
							<view class="jxlogin" v-else>￥认证后可见</view>
							<view class="jxtip">厂家直销</view>
							<view class="jxer">本产品非质量问题不退/换</view>
						</view>
					</navigator>
					<view class="foot-delete" @click="handleDel(item.day,sitem.id)">
						<view class="foot-delete-box">
							<uni-icons type="closeempty" color="#a0a0a0"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot-empty" v-else>
			<text>~还没有浏览记录~</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		useFootmarkStore
	} from '@/store/footmark'
	const footStore = useFootmarkStore()
	footStore.initFoot();
	const handleDel = (day, id) => {
		footStore.delFoot({
			day,
			id
		})
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.foot {
		padding: 20rpx;

		&-section {
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-item {
			margin-bottom: 20rpx;
			position: relative;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-delete {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 20rpx;

			&-box {
				border: 1px solid #a0a0a0;
				border-radius: 100px;
				padding: 0 15rpx;
			}
		}

		&-date {
			display: flex;
			align-items: center;
			padding-left: 15rpx;
			margin-bottom: 20rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 28rpx;
				color: $c6;
			}
		}

		&-pro {
			display: flex;
			justify-content: space-between;

			&-l {
				width: 49%;
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
				overflow: hidden;
				background: $cf;
			}

			.jxinfo {
				width: 51%;
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
				background: $cf;
				padding: 20rpx;
				box-sizing: border-box;
				margin-left: -1px;
			}
		}

		&-empty {
			height: 80vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #2f2f2f;
		}
	}
</style>